<template>
    <div>
         <van-nav-bar
      title="修改个人信息"
      left-text="返回"
      right-text="Mine"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    /> 
     <van-uploader :after-read="afterRead" class="zz">
      <template #default>
        <img :src="user.avatar" alt="" class="pic" />
      </template>
    </van-uploader>
    <van-form @submit="onSubmit">
      <!-- 昵称 -->
      <van-field
        class="nm"
        v-model="user.nickName"
        name="nickName"
        label="昵称"
        :placeholder="user.nickName ? user.nickName : user.userName"
        :rules="[{ required: false, message: '请填写用户名' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    </div>
</template>
<script>
import { Toast } from "vant";
import { getuser, setuserinfo, imgUpdateAPI } from "@/api/user";
export default{
    data() {
        return {
           user:{} 
        }
    },
    methods:{
         onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("Mine");
    },
    //上传文件
     afterRead(file) {
      this.user.avatar = file.content;
    },
     async onSubmit() {
      const res = await setuserinfo({
        nickName: this.user.nickName,
        avatar: this.user.avatar,
      });
      // console.log(res);
      if (res.code == "success") {
        Toast.success(res.message);
        setTimeout(() => {
          this.$router.push("Mine");
        }, 500);
      } else {
        Toast.fail(res.message);
      }
    },
  },
  async created() {
    let res = await getuser();
    console.log(res);
    this.user = res;
  },
    };


</script>
<style scoped>
.nm{
  margin-top: 20px;
}
.pic {
  width: 25vw;
  height: 25vw;
  transform: translateX(-50%);
  border-radius: 50%;
  margin-left: 190px;
}
</style>